<!--
  @author yangjiangming
  @date 2018-12-10 20:40:28
-->
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html th:replace="~{work/modify/common/layout :: layout('公平派单', ~{::title}, ~{::content}, ~{::script})}"
      xmlns:th="http://www.w3.org/1999/html">
<head>
    <title>工单管理-派单</title>
</head>

<body>

<div class="layui-row" style="margin-bottom: 20px; height: 30px;" th:fragment="buttonList">
</div>

<div th:fragment="content">
    <script type="text/javascript" th:src="|//api.map.baidu.com/api?v=2.0&ak=${#baiduAkUtil.getWebAk()}|"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <link rel="stylesheet" href="/static/style/work/modify/distribute.css?v=20221013001">
</div>

<div class="page-work-modify-distribute" th:fragment="content">
    <form class="layui-form" method="post" action="/work/modify/save/grid/distribute.action" lay-filter="zmn-work-form">
        <input type="hidden" id="casSign" name="casSign" th:value="${casSign}"/>
        <input type="hidden" id="orderId" name="orderId" th:value="${orderId}"/>
        <input type="hidden" id="workId" name="workId" th:value="${workId}"/>
        <input type="hidden" id="cityId" th:value="${cityId}"/>
        <input type="hidden" id="gridId" th:value="${distributeVO.gridId}"/>
        <input type="hidden" id="distributeRule" name="distributeRule" th:value="${distributeVO.distributeRule}"/>
        <input type="hidden" id="distributeWay" name="distributeWay" th:value="${distributeVO.distributeWay}"/>
        <input type="hidden" id="distributeGrid" name="distributeGrid">
        <input type="hidden" id="operateType" name="operateType" th:value="${operateType}">

        <div class="layui-form-item vvip" th:if="${vVip == 2}">此订单为VVIP用户,请安排较好的工程师上门服务!</div>
        <div class="layui-form-item">
            <label class="layui-form-label">工程师：</label>
            <th:block th:if="${distributeVO.simpleStatus}">
                <div class="layui-input-inline">
                    <select id="masterSelect" name="masterId" lay-filter="masterSelect" lay-search>
                        <option value="">请选择</option>
                        <option
                                th:each="item : ${distributeVO.masterList}"
                                th:selected="${item.masterId == distributeVO.masterId}"
                                th:value="${item.masterId}"
                                th:data-distributeGrid="${item.distributeGrid}"
                                th:text="${item.masterName} + '-' + ${item.masterPhone} + '-V' + ${item.hierarchyLevel} + '  ' + ${item.distance == null ? '' : item.distance + 'KM'} + ${item.companyId == 45111 ? ' 家' : ''}">
                        </option>
                    </select>
                </div>
            </th:block>

            <th:block th:unless="${distributeVO.simpleStatus}">
                <div class="layui-input-inline">
                    <input type="hidden" name="masterId">
                    <input class="layui-input" type="text" id="masterId" value="" placeholder="请在下方双击选择工程师" readonly autocomplete="off">
                </div>
            </th:block>

            <div class="layui-input-inline distribute-btn-wrapper">
                <div class="layui-btn-container">
                    <!-- 网络电话 -->
                    <th:block th:if="${#authPermit.checkPermit('/oms/netcall/im/connect.action')}">
                        <div class="layui-btn zmn-btn-voice" id="btn-call" lay-filter="call" lay-submit th:disabled="${distributeVO.masterId == null}"  th:classappend="${distributeVO.masterId == null}? 'layui-btn-disabled'">
                            <i class="zmn-icon zmn-icon-voice"></i>
                        </div>
                    </th:block>
                    <!-- 呼叫电话 -->
                    <th:block th:if="${#authPermit.checkPermit('/work/detail/call.action')}">
                        <div class="layui-hide layui-btn zmn-btn-voice" id="btn-cc-call" lay-submit lay-filter="cc-call" th:disabled="${distributeVO.masterId == null}"  th:classappend="${distributeVO.masterId == null}? 'layui-btn-disabled'">
                            <i class="zmn-icon zmn-icon-phone1"></i>
                        </div>
                    </th:block>
                    <input class="layui-btn btn-distribute" id="distribute" type="button" value="确认派单" lay-filter="distribute" lay-submit></input>
                </div>
            </div>
            <div class="layui-form-mid layui-word-aux" style="margin-left: -135px;">
                <p class="message-danger" th:if="${distributeVO.dutyRecentMaster != null}">
                    相似工单，已派给工程师：[[${distributeVO.dutyRecentMaster.masterName}]]-[[${distributeVO.dutyRecentMaster.masterPhone}]]</p>
            </div>
        </div>

        <th:block th:if="${distributeReasonList != null && distributeReasonList.size() > 0}">
            <!-- 改派缘由 -->
            <div class="layui-form-item">
                <label class="layui-form-label distribute-label">改派缘由：</label>
                <div class="layui-input-inline distribute-content">
                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4" th:each="item : ${distributeReasonList}">
                        <input type="radio" name="distributeReasonId" lay-skin="primary" lay-filter="distributeReason"
                               th:title="${item.reason}"
                               th:value="${item.id}"
                               th:data-liable-type="${item.liableType}"
                               th:data-liable-type-name="${item.liableTypeName}">
                    </div>
                </div>
            </div>
            <!-- 责任归属 -->
            <div class="layui-form-item">
                <label class="layui-form-label distribute-label">责任归属：</label>
                <div class="layui-input-inline distribute-text" id="liableTypeName">
                </div>
            </div>
        </th:block>

        <div class="layui-collapse">
            <div class="layui-colla-item">
                <div class="layui-colla-content">
                    <div class="layui-form-item">
                        <label class="layui-form-label">工程师：</label>
                        <div class="layui-input-inline">
                            <select id="select-master" style="width: 100%;" lay-ignore>
                            </select>
                        </div>
                        <div class="layui-input-inline distribute-btn-wrapper">
                            <div class="layui-btn-container">
                                <th:block th:if="${#authPermit.checkPermit('/oms/netcall/im/connect.action')}">
                                    <div class="layui-btn zmn-btn-voice btn-placeholder" lay-filter="call" lay-submit >
                                        <i class="zmn-icon zmn-icon-voice"></i>
                                    </div>
                                </th:block>
                                <input class="layui-btn btn-distribute" id="check-master" type="button" value="校验" lay-filter="check-master" lay-submit ></input>
                            </div>
                        </div>
                        <div class="layui-form-mid" style="width: calc(100% - 600px)">
                            <p class="master-check-message">
                                <span id="master-check-msg"></span>
                            </p>
                        </div>
                    </div>
                </div>
                <h2 class="layui-colla-title">校验工程师</h2>
            </div>
        </div>
    </form>

    <div class="layui-tab layui-tab-brief tab-distribute" lay-filter="tabEvent">
        <ul class="layui-tab-title outside-tab-title">
            <li class="layui-this">
                <button class="layui-btn layui-btn-sm btn-active">网格内工程师</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm">网格内工程师</button>
            </li>
            <li>
                <button class="layui-btn layui-btn-sm btn-active">网格外工程师</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm">网格外工程师</button>
            </li>
        </ul>
        <div class="layui-tab-content">
            <div id="distributeList" class="layui-tab-item layui-show">
                <div class="layui-tab layui-tab-brief tab-distribute" style="margin-top: 30px" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">
                            <button class="layui-btn layui-btn-sm btn-active">地图</button>
                            <button class="layui-btn layui-btn-primary layui-btn-sm">地图</button>
                        </li>
                        <li>
                            <button class="layui-btn layui-btn-sm btn-active">列表</button>
                            <button class="layui-btn layui-btn-primary layui-btn-sm">列表</button>
                        </li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show" id="mapView">
                            <div th:replace="this :: buttonList"></div>
                            <div>
                                <div class="layui-row layui-col-space15">
                                    <div class="layui-col-md9">
                                        <div class="map-tips-5km">当前位置5KM以内网格</div>
                                        <div class="map" id="mapOfmaterList"></div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <table id="simpleMasterTable" lay-filter="tableOfMatserList"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item" id="tableView">
                            <div th:replace="this :: buttonList"></div>
                            <table id="detailMasterTable" lay-filter="tableOfMatserList"></table>
                        </div>
                    </div>
                </div>
            </div>
            <div id="nonDistributeList" class="layui-tab-item">
                <div class="layui-tab layui-tab-brief tab-distribute" style="margin-top: 30px" lay-filter="nonDistribute">
                    <ul class="layui-tab-title">
                        <li class="layui-this">
                            <button class="layui-btn layui-btn-sm btn-active">地图</button>
                            <button class="layui-btn layui-btn-primary layui-btn-sm">地图</button>
                        </li>
                        <li>
                            <button class="layui-btn layui-btn-sm btn-active">列表</button>
                            <button class="layui-btn layui-btn-primary layui-btn-sm">列表</button>
                        </li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show" id="nonMapView">
                            <div th:replace="this :: buttonList"></div>
                            <div>
                                <div class="layui-row layui-col-space15">
                                    <div class="layui-col-md9">
                                        <div class="map-tips-5km">当前位置5KM以内网格</div>
                                        <div class="map" id="nonMapOfmaterList"></div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <table id="nonSimpleMasterTable" lay-filter="nonTableOfMatserList"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item" id="nonTableView">
                            <div th:replace="this :: buttonList"></div>
                            <table id="nonDetailMasterTable" lay-filter="nonTableOfMatserList"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-hide" id="modal-voice-wrapper">
        <div class="modal-main">
            <div class="modal-content">
                <p>目前系统支持和工程师app的语音通话的手机品牌有：华为、小米、vivo、oppo、魅族，其他手机品牌系统暂不支持</p>
            </div>
            <div class="modal-footer">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="btn-container">
                            <input class="layui-btn" type="button" value="我知道了" lay-filter="form-modal" lay-submit></input>
                            <div class="input-noTips">
                                <input type="checkbox" name="noTips" lay-skin="primary" title="下次不再提醒">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-hide" id="modal-distribute-wrapper">
        <div class="modal-main">
            <div class="modal-content">
                <p>
                    已有工程师领单，确认重新派单？<br>
                    重新派单后，工单状态将变更至：已派单状态，并且清空：服务项目、人工优惠等信息。
                </p>
            </div>
            <div class="modal-footer">
                <div class="btn-container">
                    <button class="layui-btn" id="btn-confirm">确认</button>
                    <input type="button" class="layui-btn layui-btn-primary" id="btn-cancel" value="取消"></input>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    var json = {
        dutyInfo: [[${distributeVO.dutyInfo}]],
        masterId: [[${distributeVO.masterId}]],
        masterList: [[${distributeVO.masterList}]],
        recommendMasterList: [[${distributeVO.recommendMasterList}]],
        nonDistributeMasterList: [[${distributeVO.nonDistributeMasterList}]],
        nonGridDistributeMasterList: [[${distributeVO.nonGridDistributeMasterList}]],
        mainSkillId: [[${distributeVO.mainSkillId}]],
        orderLocation: {
            lng: [[${distributeVO.longitude}]],
            lat: [[${distributeVO.latitude}]]
        },
        plat: [[${plat}]],
        recommendStatus: [[${distributeVO.recommendStatus}]],
        // 简单状态
        simpleStatus: [[${distributeVO.simpleStatus}]],
        // 公平状态
        fairStatus: [[${distributeVO.fairStatus}]],
        reworkMasterId: [[${distributeVO.reworkMasterId}]],
        weightMap: [[${distributeVO.weightMap}]],
        gridList: [[${distributeVO.gridList}]],
        stockCity: [[${distributeVO.stockCity}]]
    };

    var canNetCall = [[${#authPermit.checkPermit('/oms/netcall/im/connect.action')}]];

    var layuiModel = {
        oms_work_modify_grid_biztypec_fair_distribute: "work/modify/distribute/grid/biztypec/zmn.oms.work.modify.fair.distribute"
    };
</script>

</body>
</html>